<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<title>金乘方 后台登录</title>

	<meta name="description" content="User login page" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

	<!-- bootstrap & fontawesome -->
	<link rel="stylesheet" href="__sweet_css__/sweetalert2.min.css" />
	<link rel="stylesheet" href="__ace_css__/bootstrap.min.css" />
	<link rel="stylesheet" href="__ace_font-awesome__/4.5.0/css/font-awesome.min.css" />

	<!-- text fonts -->
	<link rel="stylesheet" href="__ace_css__/fonts.googleapis.com.css" />

	<!-- ace styles -->
	<link rel="stylesheet" href="__ace_css__/ace.min.css" />

	<!--[if lte IE 9]>
	<link rel="stylesheet" href="__ace_css__/ace-part2.min.css" />
	<![endif]-->
	<link rel="stylesheet" href="__ace_css__/ace-rtl.min.css" />

	<!--[if lte IE 9]>
	<link rel="stylesheet" href="__ace_css__/ace-ie.min.css" />
	<![endif]-->

	<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

	<!--[if lte IE 8]>
	<script src="__ace_js__/html5shiv.min.js"></script>
	<script src="__ace_js__/respond.min.js"></script>
	<![endif]-->
</head>

<body class="login-layout">
<div class="main-container">
	<div class="main-content">
		<div class="row">
			<div class="col-sm-10 col-sm-offset-1">
				<div class="login-container">
					<div class="center">
						<h1>
							<i class="ace-icon fa fa-leaf green"></i>
							<span class="red"></span>
							<span class="white" id="id-text2">管理后台</span>
						</h1>
					</div>

					<div class="space-6"></div>

					<div class="position-relative">
						<div id="login-box" class="login-box visible widget-box no-border">
							<div class="widget-body">
								<div class="widget-main">
									<h4 class="header blue lighter bigger">
										<i class="ace-icon fa fa-coffee green"></i>
										请填写你的信息
									</h4>
									<div class="space-6"></div>
									<form>
										<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" id="username" class="form-control" placeholder="用户名" />
															<i class="ace-icon fa fa-user"></i>
														</span>
										</label>

										<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" id="password" class="form-control" placeholder="密码" />
															<i class="ace-icon fa fa-lock"></i>
														</span>
										</label>

										<div class="form-group">
											<div class="col-sm-6">
												<div class="row">
													<span class="block input-icon input-icon-right">
														<input type="text" id="verify" class="form-control" placeholder="验证码" />
														<input type="hidden" name="__token__"  id="__token__"  value="{$token}"/>
													</span>
												</div>
											</div>
											<div class="col-xs-6">
												<span class="reloadverify">
												<img src="{:url('admin/login/verify')}" class="verifyimg" alt="验证码" height="38px">
												</span>
											</div>
										</div>
										<div class="space"></div>
										<div class="space"></div>
										<div class="space"></div>
										<div class="space"></div>
										<div class="form-group">
											<div class="center">
												<button type="button" id="login_btn" class="width-35 pull-center btn btn-sm btn-primary">
													<i class="ace-icon fa fa-key"></i>
													<span class="bigger-110"  >登录</span>
												</button>
											</div>
										</div>
										<div class="space-4"></div>
									</form>
								</div><!-- /.widget-main -->
							</div><!-- /.widget-body -->
						</div><!-- /.login-box -->
					</div><!-- /.position-relative -->

				</div>
			</div><!-- /.col -->
		</div><!-- /.row -->
	</div><!-- /.main-content -->
</div><!-- /.main-container -->

<!-- basic scripts -->

<!--[if !IE]> -->
<script src="__ace_js__/jquery-2.1.4.min.js"></script>
<script src="__sweet_js__/sweetalert2.min.js"></script>

<!-- <![endif]-->

<!--[if IE]>
<script src="__ace_js__/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
	if('ontouchstart' in document.documentElement) document.write("<script src='__ace_js__/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>

<!-- inline scripts related to this page -->
<script type="text/javascript">


	//刷新验证码
	$(function(){
		var verifyimg = $(".verifyimg").attr("src");
		$(".reloadverify").click(function(){
			if( verifyimg.indexOf('?')>0){
				$(".verifyimg").attr("src", verifyimg+'&random='+Math.random());
			}else{
				$(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
			}
		});
	});

	$("#login_btn").click(function () {
		var username = $("#username").val();
		var password = $("#password").val();
		var verify = $("#verify").val();
		var __token__ = $('#__token__').val();
		if (username == ''||password == ''){
			swal({
				type: 'warning', // 弹框类型
				title: '用户名或者密码不能为空', //标题
				confirmButtonColor: '#438EB9',// 确定按钮的 颜色
				confirmButtonText: '确定',// 确定按钮的 文字
			});
			return false;
		}
		if(verify == ''){
			swal({
				type: 'warning', // 弹框类型
				title: '验证码不能为空', //标题
				confirmButtonColor: '#438EB9',// 确定按钮的 颜色
				confirmButtonText: '确定',// 确定按钮的 文字
			});
			return false;
		}
		$.ajax({
			url:"{:url('admin.doLogin')}",
			type:"POST",
			dataType:"JSON",
			data:{"username":username,"password":password,"verify":verify,__token__:__token__},
			success:function (res) {
				$('#__token__').val(res.data.__token__);
				if(res.code == 1){
					location.href = "{:url('admin.index')}";
				}else{
					$(".reloadverify").click();//刷新验证码
					swal({
						type: 'warning', // 弹框类型
						title:res.msg,   //标题
						confirmButtonColor: '#438EB9',// 确定按钮的 颜色
						confirmButtonText: '确定',// 确定按钮的 文字
					});
				}
				return false;
			},error:function (e) {
				$('#__token__').val(res.data.__token__);
				swal({
					type: 'warning', // 弹框类型
					title:'系统异常',   //标题
					confirmButtonColor: '#438EB9',// 确定按钮的 颜色
					confirmButtonText: '确定',// 确定按钮的 文字
				});
			}
		})
	})
</script>
</body>
</html>
